<template>
	<view>
		<view class="item">
			<view class="item_detail">
				<text>账号</text>
				<input type="text" placeholder="请输入账号" v-model="username" maxlength="12" require='require'>
			</view>
			<view class="item_detail">
				<text>密码</text>
				<input type="password" placeholder="请输入密码" v-model="password" maxlength="12" require='require'>
			</view>
		</view>
		<view class="btn">
			<button @click="login">立即登录</button>
			<button @click="toRegister">立即注册</button>
		</view>
	</view>
</template>

<script>
	import urls from '@/common/urls.js'

	export default {
		data() {
			return {
				username: "",
				password: ""

			}
		},
		methods: {
			login() {
				this.$axios.post(urls.graphql, {
						query: `
						query login {
							login(username: "${this.username}",password: "${this.password}") {
								id
								nickname
								money
								token
							}
							}`
					}, )
					.then(res => {
						const login = res.data.login;
						if (login.length !== 0) {
							// let {token,nickname,id} = login[0];
							console.log("login ok", login[0])
							uni.setStorage({
								key: 'userInfo',
								data: login[0],
								success: (data) => {
									uni.showToast({
										title: '登录成功',
										icon: 'none'
									})
									setTimeout(()=>{
										uni.switchTab({
											url: '../index/index'
										})
									},1000)
									
								}
							})
						} else {
							uni.showToast({
								title: '账号或者密码错误！',
								icon: 'none'
							})

						}
					})
					.catch(err => {
						console.log("err", err)
						uni.showToast({
							title: '未知错误',
							icon: 'none'
						})
					})
			},
			toRegister() {
				uni.navigateTo({
					url: './register'
				});
			}

		},
		onShow() {}
	}
</script>

<style lang="scss">
.item{
	margin-top: 20rpx;
	margin-left: 40rpx;
	font-size: 40rpx;
	.item_detail{
		margin-bottom: 20rpx;
		text{
			color: #333333;
			font-size: 32rpx;
			font-weight: 900;
		}
		input{
			background: #f3f3f3;
			margin-top: 10rpx;
			width: 600rpx;
			height: 70rpx;
			font-size: 32rpx;
			padding-left: 10rpx;
			border-radius: 10rpx;
		}
	}
}
.btn{
	margin-top: 50rpx;
	button{
		background: #4768f3;
		width: 610rpx; 
		color: white;
		
		margin-left: 40rpx;
		margin-bottom: 20rpx;
	}
	
}
</style>
